
//  在组件中发送请求
import { getHomeTopDatas } from '../../https/Api/home'
import { useEffect, useState } from 'react'




//查表的思想
let iconList = [
    {name:'今日预约人数',icon:"icon-ico_yuyueguanli_jiedaiyuyue"},
    {name:'今日挂号人数',icon:"icon-guahao"},
    {name:'今日门诊充值总额',icon:"icon-chongzhi"},
    {name:'今日门诊消费总额',icon:"icon-ico_yuyueguanli_jiedaiyuyue"},
    {name:'今日绑卡人数',icon:"icon-ico_yuyueguanli_jiedaiyuyue"},
]

const findIcon= (val:string)=>{
     let obj:any = iconList.find((item)=>{
    
        return item.name ==val
     })

     return obj.icon
}

function TopListShow() {
    let [dataLists, setDatas] = useState([])
    useEffect(() => {
        getHomeTopDatas().then((res: any) => {
            console.log(res, 8885);
            if (res.code == 200) {
                setDatas(res.lists)
            }

        })
    }, [])

const changeTyle =(index:number)=>{
          if(index==0){
             return 'red'
          }else if(index==1){
            return 'blue'
          }else{
            return 'pink'
          }
}


    return (
        <div className='TopHomeList glb-flex1'>
            {dataLists.map((item: any, index) => {
                return (
                    <div className='TopHomeList-Item glb-flex1' key={index}>
                        <div className='TopHomeList-Item-left' style={{ background:`${changeTyle(index)}`}}>
                            {/* 图标 颜色 */}
                            <i className={`iconfont ${findIcon(item.title)}`}></i>
                        </div>
                        <div>
                            <div>{item.nums}</div>
                            <div>{item.title}</div>

                        </div>
                    </div>
                )
            })}
        </div>
    )
}


export default TopListShow